<template>
    <div>
        <!-- 内容页 -->
        <template v-if="login">
            <div class="layout" width='100px' :class="{'layout-hide-text': spanLeft < 5}">
                <Row type="flex">
                    <Col :span="spanLeft" class="layout-menu-left">
                        <Menu active-name="1" theme="dark" width="auto">
                            <div class="layout-logo-left">
                                <div v-show="show" class="box">
                                    <div class="demo-upload-list headPic">
                                        <img :src="picurl"/>
                                    </div>
                                    <div class="demo-upload-list username">
                                        {{this.user}}<strong class="state">已登录</strong>
                                    </div>
                                </div>
                            </div>
                           
                            <router-link to='/' active-class="active" >
                                <MenuItem name="1">
                                    <Icon type="ios-navigate" :size="iconSize"></Icon>
                                    <span class="layout-text">
                                        首页
                                    </span>
                                </MenuItem>
                            </router-link>

                            <router-link to='/user' active-class="active" >
                                <MenuItem name="2">
                                    <Icon type="person" :size="iconSize"></Icon>
                                    <span class="layout-text">
                                        用户管理
                                    </span>
                                </MenuItem>
                            </router-link>
                            
                            <router-link to='/cate' active-class="active">
                                <MenuItem name="3">
                                    <Icon type="briefcase" :size="iconSize"></Icon>
                                    <span class="layout-text">
                                        分类管理
                                    </span>
                                </MenuItem>
                            </router-link>

                            <router-link to='/upload' active-class="active">
                                <MenuItem name="4">
                                    <Icon type="upload" :size="iconSize"></Icon>
                                    <span class="layout-text">
                                        上传管理
                                    </span>
                                </MenuItem>
                            </router-link>

                            <router-link to='/news' active-class="active">
                                <MenuItem name="5">
                                    <Icon type="chatbox-working" :size="iconSize"></Icon>
                                    <span class="layout-text">
                                        新闻管理
                                    </span>
                                </MenuItem>
                            </router-link>

                            <router-link to='/comment' active-class="active">
                                <MenuItem name="6">
                                    <Icon type="compose" :size="iconSize"></Icon>
                                    <span class="layout-text">
                                        评论管理
                                    </span>
                                </MenuItem>
                            </router-link>

                            <router-link to='/product' active-class="active">
                                <MenuItem name="7">
                                    <Icon type="filing" :size="iconSize"></Icon>
                                    <span class="layout-text">
                                        产品管理
                                    </span>
                                </MenuItem>
                            </router-link>
                        </Menu>
                    </Col>
                    <Col :span="spanRight">
                        <div class="layout-header">
                            <Button type="text" @click="toggleClick">
                                <Icon type="navicon" size="32"></Icon>
                            </Button>
                            <span style="font-size:18px;position:absolute;right:120px;top:18px">尊敬的&nbsp;&nbsp;<span style="color:red">{{this.user}}</span>，你好  </span>
                            <Button type="primary" @click="quit" style="position:absolute;top:15px;right:30px">注销</Button>
                        </div>
                        <div class="layout-breadcrumb">
                            <Breadcrumb>
                                <BreadcrumbItem href="#">首页</BreadcrumbItem>
                                <BreadcrumbItem >
                                    {{$route.meta.title}}
                                </BreadcrumbItem>
                            </Breadcrumb>
                        </div>
                        <div class="layout-content">
                            <router-view></router-view>
                        </div>
                        <div class="layout-copy">
                            2011-2018 &copy; Manage-system
                        </div>
                        <div class="layout-copy">
                            made by 周凯迪
                        </div>
                    </Col>
                </Row>
            </div>
        </template>

        <!-- 登录与登录 -->
        <template v-else>
            <!-- 登录页 -->
            <template v-if="reg">
                <div style="text-align:center;margin:100px 0"><Icon type="wrench" size="100"></Icon><span class="biaoti">后台管理系统</span></div>
                <Form ref="formInline" :model="formInline" :rules="ruleInline" inline style="text-align:center">
                    <FormItem prop="name" style="width:250px">
                        <Input type="text" v-model="formInline.name" placeholder="Username">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem></br>
                    <FormItem prop="password" style="width:250px">
                        <Input type="password" v-model="formInline.password" placeholder="Password">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem></br>
                    <FormItem >
                        <Button type="primary" @click="handleSubmit('formInline')" style="width:250px">登录</Button><br/>
                    </FormItem></br>
                    <FormItem >
                        <router-link to='/register' active-class="active">
                            <Button type="success" @click="toRegister" style="width:250px">注册</Button>
                        </router-link>
                    </FormItem>
                </Form>
                <div class="footer">
                    made by 周凯迪
                </div>
            </template>

            <!-- 注册页 -->
            <template v-else>
                <Register @changeReg="reg=$event"></Register>
            </template>
        </template>
    </div>
</template>

<script>
    import Register from './components/Register.vue';
    import {mapGetters,mapActions} from 'vuex';
    import md5 from 'crypto-js/md5';
    export default {
        components:{
            Register
        },
        data () {
            return {
                spanLeft: 5,
                spanRight: 19,
                title:'',
                user:'',
                show:true,//用于登录页与内容页切换
                reg:true,//用于登录与注册切换
                picurl:'',
                formInline: {
                    name: '',
                    password: ''
                },
                ruleInline: {
                    name: [
                        { required: true, message: '请填写用户名', trigger: 'blur' },
                        { required: true,min: 2, message: '用户名长度不能小于2位', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { required: true,min: 3, message: '密码长度不能小于3位', trigger: 'blur' }
                    ]
                }
            }
        },
        computed: {
            ...mapGetters(['login']),
            iconSize () {
                return this.spanLeft === 5 ? 14 : 24;
            }
        },
        created(){
            if(window.sessionStorage.getItem('loginUser')) {
                this.checkLogin(true);
                this.user=sessionStorage.getItem('loginUser');
                this.picurl=sessionStorage.getItem('picurl');
            }
        },
        methods: {
            ...mapActions(['checkLogin']),
            toggleClick () {
                if (this.spanLeft === 5) {
                    this.spanLeft = 2;
                    this.spanRight = 22;
                } else {
                    this.spanLeft = 5;
                    this.spanRight = 19;
                }
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http({
                            url:'http://localhost:3000/users/login',
                            method:'post',
                            data:this.formInline
                        }).then(res=>{
                            console.log(res.data)
                            this.formInline.password=md5(this.formInline.password.trim()).toString();
                            console.log(this.formInline)
                            if(res.data && res.data.name==this.formInline.name.trim() && md5(res.data.password).toString()==this.formInline.password){
                                this.checkLogin(true);
                                sessionStorage.setItem("loginUser",res.data.name);
                                sessionStorage.setItem("picurl",res.data.picurl);
                                this.user=res.data.name;
                                this.picurl=res.data.picurl;
                                this.show=true;
                                this.$Message.success('登录成功!');
                                this.$router.push('/');
                                this.formInline.name='';
                                this.formInline.password=''
                            }else {
                                this.$Message.error('登录失败!');
                            }
                        })
                        
                    } 
                })
            },
            toRegister(){
                this.reg=false
            },
            quit(){
                this.checkLogin(false);
                this.show=false;
                sessionStorage.removeItem('loginUser');
                sessionStorage.removeItem('picurl');
            }

        }
    }
</script>

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 700px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-menu-left{
        background: #464c5b;
    }
    .layout-header{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 91%;
        height: 189px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
    .layout-ceiling-main a{
        color: #9ba7b5;
    }
    .layout-hide-text .layout-text{
        display: none;
    }
    .ivu-col{
        transition: width .2s ease-in-out;
    }
    .biaoti{
        font-family: "Hiragino Sans GB";
        font-size:50px;
    }
    .footer{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .active{
        color:white
    }

    .demo-upload-list{
        display: inline-block;
        margin-left:4px;
        width: 97%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        z-index:8
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .box{
        width:100%;
    }
    .headPic{
        height:130px
    }
    .username{
        width:97%;
        height:50px;
        line-height: 45px;
        font-size:30px;
    }
    .state{
        color:green;
        font-size: 13px;
        float: right;
        margin-right:40px
    }
</style>